<template>
    <div class="w-full h-screen flex justify-center place-content-center content-center place-items-center">
        <div class="container">
            <div class="form-box">
                <!-- 注册 -->
                <div class="register-box hidden">
                    <h1>register</h1>
                    <input type="text" placeholder="用户名" v-model="username">
                    <input type="password" placeholder="密码" v-model="password">
                    <input type="password" placeholder="确认密码" v-model="confirmPassword">

                    <button @click="registerFn">注册</button>
                </div>
                <!-- 登录 -->
                <div class="login-box">
                    <h1>login</h1>
                    <input type="text" placeholder="用户名" v-model="username">
                    <input type="password" placeholder="密码" v-model="password">
                    <button @click="login">登录</button>
                </div>
            </div>
            <div class="con-box left">
                <h2>欢迎来到<span>XXX网站</span></h2>
                <span>一个XXX的网站</span>
                <p>请<span>注册</span></p>
                <p>已有账号</p>
                <button id="login">去登录</button>
            </div>
            <div class="con-box right">
                <h2>欢迎来到<span>XXX网站</span></h2>
                <span>一个XXX的网站</span>
                <p>请<span>登录</span></p>
                <p>没有账号？</p>
                <button id="register">去注册</button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { api } from '../boot/api'
import axios from 'axios'
definePageMeta({
    layout: false
})
const toast = useToast()

const router = useRouter()
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const email = ref('')
const tel = ref('')
const registerFn = async () => {
    if (password.value !== confirmPassword.value) {
        ElMessage.success('两次密码不一致')
        return
    }
    let payload = {
        username: username.value,
        password: password.value,
        role: '用户'
    }
    axios({
        url: "http://127.0.0.1:8000/user/add_one",
        method: "post",
        data: payload
    }).then(res => {
        let response = res.data
        if (response.code == 200) {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '注册成功',
                color: 'green',
                description: '请登录',
            })
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '注册失败',
                color: 'red',
                description: '用户名已存在',
            })
        }
    })
}
const login = () => {
    let payload = {
        username: username.value,
        password: password.value
    }
    axios({
        url: "http://127.0.0.1:8000/users/login",
        method: "post",
        data: payload
    }).then(res => {
        let response = res.data
        if (response.code == 200) {
            ElMessage.success('登录成功')
            localStorage.setItem('info', response.data)
            localStorage.setItem('user_id', response.data.id)
            localStorage.setItem('username', response.data.username)
            if (response.data.role === '用户') { router.push({ name: 'index' }) }
            else {
                window.location.href = 'http://localhost:9528'
            }
        } else {
            toast.add({
                icon: 'i-heroicons-information-circle-20-solid',
                title: '登录失败',
                color: 'red',
                description: '用户名或密码错误',
            })
        }
    })
}
onMounted(() => {
    let login = document.getElementById('login');
    let register = document.getElementById('register');
    let form_box = document.getElementsByClassName('form-box')[0];
    let register_box = document.getElementsByClassName('register-box')[0];
    let login_box = document.getElementsByClassName('login-box')[0];
    // 去注册按钮点击事件
    register.addEventListener('click', () => {
        form_box.style.transform = 'translateX(80%)';
        login_box.classList.add('hidden');
        register_box.classList.remove('hidden');
    })
    // 去登录按钮点击事件
    login.addEventListener('click', () => {
        form_box.style.transform = 'translateX(0%)';
        register_box.classList.add('hidden');
        login_box.classList.remove('hidden');
    })
})
</script>
<style scoped>
* {
    /* 初始化 */
    margin: 0;
    padding: 0;
}

body {
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 渐变背景 */
    background: linear-gradient(200deg, #e7eef3, #ecfdff);
}

.container {
    background-color: #fff;
    width: 650px;
    height: 415px;
    border-radius: 5px;
    /* 阴影 */
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    /* 相对定位 */
    position: relative;
}

.form-box {
    /* 绝对定位 */
    position: absolute;
    top: -10%;
    left: 5%;
    background-color: #AFDCE0;
    width: 320px;
    height: 500px;
    border-radius: 5px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* 动画过渡 加速后减速 */
    transition: 0.5s ease-in-out;
}

.register-box,
.login-box {
    /* 弹性布局 垂直排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hidden {
    display: none;
    transition: 0.5s;
}

h1 {
    text-align: center;
    margin-bottom: 25px;
    /* 大写 */
    text-transform: uppercase;
    color: #fff;
    /* 字间距 */
    letter-spacing: 5px;
}

input {
    background-color: transparent;
    width: 70%;
    color: #fff;
    border: none;
    /* 下边框样式 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 10px 0;
    text-indent: 10px;
    margin: 8px 0;
    font-size: 14px;
    letter-spacing: 2px;
}

input::placeholder {
    color: #fff;
}

input:focus {
    color: #ffffff;
    outline: none;
    border-bottom: 1px solid #48949b;
    transition: 0.5s;
}

input:focus::placeholder {
    opacity: 0;
}

.form-box button {
    width: 70%;
    margin-top: 35px;
    background-color: #f6f6f6;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: #44a9b4;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

.form-box button:hover {
    background-color: #5dc0c9;
    color: #f6f6f6;
    transition: background-color 0.5s ease;
}

.con-box {
    width: 50%;
    /* 弹性布局 垂直排列 居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 绝对定位 居中 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.con-box.left {
    left: -2%;
}

.con-box.right {
    right: -2%;
}

.con-box h2 {
    color: #8e9aaf;
    font-size: 25px;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
}

.con-box p {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8e9aaf;
    text-align: center;
}

.con-box span {
    color: #AFDCE0;
}

.con-box img {
    width: 180px;

    opacity: 0.9;
    margin: 40px 0;
}

.con-box button {
    margin-top: 3%;
    background-color: #fff;
    color: #5dc0c9;
    border: 1px solid #5dc0c9;
    padding: 6px 10px;
    border-radius: 5px;
    letter-spacing: 1px;
    outline: none;
    cursor: pointer;
}

.con-box button:hover {
    background-color: #5dc0c9;
    color: #fff;
}
</style>